<template>
  <!-- 架子 -->
  <div class="layout">
   <slot name="top" ></slot>
   <slot name="img"></slot>
    <!-- layout组件 -->
    <!-- 二级路由出口   子路由出口 -->
    <router-view></router-view>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o">面经</van-tabbar-item>
      <van-tabbar-item icon="search">收藏</van-tabbar-item>
      <van-tabbar-item icon="friends-o">点赞</van-tabbar-item>
      <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "HmLayout",
   data() {
    return {
      active: 0,
    };
  },
 props: {
    value: {
      type: Number,
      default: 0,
    },
},
watch: {
    $route(to) {
      if (to.path.includes('HmArticle')) {
        this.active = 0;
      } else if (to.path.includes('HmCollect')) {
        this.active = 1;
      } else if (to.path.includes('HmLike')) {
        this.active = 2;
      } else if (to.path.includes('HmUser')) {
        this.active = 3;
      }
    },
  },
  methods: {
    onChange() {
      switch (this.active) {
        case 0:
          this.$router.push("/HmLayout/HmArticle");
          break;
        case 1:
          this.$router.push("/HmLayout/HmCollect");
          break;
        case 2:
          this.$router.push("/HmLayout/HmLike");
          break;
        case 3:
          this.$router.push("/HmLayout/HmUser");
          break;
      }
    },
  
  },
};
</script>

<style lang="less" scoped>
.layout {
  position: relative;
}
.doge {
  width: 60px;
  margin: 8px;
  position: absolute;
  top: 0;
  right: 0;
}
.van-tabbar-item--active {
  color: orange;
}
a {
  color: white;
  font-size: 18px;
  line-height: 50px;
}
a.active {
  color: yellow;
  font-size: 25px;
}
</style>
